{% block style %}
  {% if _globals.params.navbarFixedTop %}
    <style type="text/css">
      body { padding-top: 70px; }
    </style>
  {% endif %}
{% endblock %}

<header>
  <nav class="{{ _globals.params.navbarClass }}">
    <div class="container"> <!-- -fluid -->
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"><img src="/assets/images/logo.png" alt="Mder"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          {#<li class="{% if _pageRoute == '/home' %}active{% endif %}"><a href="/">#}
              {#<span class="glyphicon glyphicon-home"></span>#}
              {#{{ _globals.lang.tl('home') }} <span class="sr-only">(current)</span></a>#}
          {#</li>#}

          <li class="{% if _pageRoute == '/home' %}active{% endif %}"><a href="/">
              <span class="glyphicon glyphicon-home"></span>
              {{ _globals.lang.tl('home') }} <span class="sr-only">(current)</span></a>
          </li>
        </ul>

        <p class="navbar-text">
          {% if projectName is defined and projectName %}
            您正在阅读文档<strong>《{{ projectName }}》</strong>
          {% else %}
            Hello, Welcome to here!
          {% endif %}
        </p>

        <ul class="nav navbar-nav navbar-right">
          {% if _globals.user.isLogin() %}
            <li class="{% if _pageRoute == '/_mder' %}active{% endif %}">
              <a href="/_mder" data-toggle="tooltip" data-placement="bottom" title="Manager">
              <span class="glyphicon glyphicon-cog"></span>
              {# {{ _globals.lang.tl('manager') }} <span class="sr-only">(current)</span> #}
              </a>
            </li>

            <!-- Css style dropdown list -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Css style">
                {#<span class="glyphicon glyphicon-plus"></span>#}
                <span class="glyphicon glyphicon-tint" data-toggle="tooltip" data-placement="bottom" title="Css style"></span>
                {#<span class="caret"></span>#}
              </a>
              <ul class="dropdown-menu J-select-theme">
                <li><a href="{{ path_for('mder-style',{'action':'cssTheme'}) }}"><span class="glyphicon glyphicon-eye-open"></span> Css Theme</a></li>
                <li role="separator" class="divider"></li>
                {% for style in _globals.config.cssStyleList %}
                  <li class="{% if _globals.params.cssStyle==style %}active{% endif %}">
                    <a href="javascript:void(0);" class="css-style" data-style="{{ style }}">
                    {{ style|capitalize }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
            <!-- end. Css style dropdown list -->

            <!-- Operate menu -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Create Page">
                {# <span class="glyphicon glyphicon-menu-hamburger"></span> #}
                <span class="glyphicon glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Create Page"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="{{ path_for('mder-page',{'action':'add'}) }}">
                  <span class="glyphicon glyphicon-plus-sign"></span> {{ _globals.lang.tl('pageAdd2') }}
                </a></li>
                <li><a href="/_mder/editor">
                  <span class="glyphicon glyphicon-edit"></span> 编辑器
                </a></li>
                <li role="separator" class="divider"></li>
                {# <li><a href="{{ path_for('mder-page',{'action':'add'}, {'page':'/blog'}) }}"><span class="glyphicon glyphicon-leaf"></span> {{ _globals.lang.tl('createBlog') }}</a></li> #}
              </ul>
            </li>
            <!-- end. Operate menu -->

            <!-- user operate menu -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Operate menu">
                <span class="label label-success">
                  <span class="glyphicon glyphicon-user"></span>
                    {{ _globals.user.username }}
                </span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span> {{ _globals.lang.tl('settings') }}</a></li>
                <li role="separator" class="divider"></li>
                <li>
                  <a href="{{ _globals.config.urls.logout }}"><span class="glyphicon glyphicon-log-out"></span> {{ _globals.lang.tl('logout') }}</a>
                </li>
              </ul>
            </li>

          {% else %}
            <li><a href="{{ _globals.config.urls.login }}" title="{{ _globals.lang.tl('login') }}">
              <span class="glyphicon glyphicon-log-in"></span></a>
            </li>
          {% endif %}
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>